<h1 mat-dialog-title>新增選單
    <a (click)="addMenuList()" style="cursor: default">
        <i class="material-icons">add_circle</i>
    </a>
</h1>
<div mat-dialog-content>
    <form [formGroup]="addMenuForm">
        <div formArrayName="containLists">
            <div *ngFor="let containList of addMenuForm.get('containLists')['controls']; let i =index">
                <div>
                    <span>Menu {{i + 1}}</span>
                    <span *ngIf="addMenuForm.get('containLists')['controls'].length > 1" (click)="removeMenuList(i)">
                        <i class="material-icons">cancel</i>
                    </span>
                </div>
                <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
                <div [formGroupName]="i">
                    <menu-create-unit [group]="this.addMenuForm.get('containLists')['controls'][i]" [menuList]="menuList"></menu-create-unit>
                </div>
            </div>
        </div>
        <div class="margin-20">
            <a (click)="addMenuList()" style="cursor: default">
                <i class="material-icons">add_circle</i>
            </a>
        </div>
    </form>
</div>
<div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onNoClick()">取消</button>
    <button mat-raised-button color="primary" (click)="onYesClick(addMenuForm.value.containLists)" [disabled]="!addMenuForm.valid">確定新增</button>
</div>